<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app" class="w-app">
    <div id="no-1" v-if="no === 1">
      <div class="w-title">{{applicationFormNo1.tableHeader.name}}销毁申请单</div>
      <div class="horizontal-direction"><div class="horizontal-box">申请单位：<span>{{applicationFormNo1.tableHeader.company}}</span></div><div class="horizontal-box">销毁单号：<span>{{applicationFormNo1.tableHeader.oddNumbers}}</div></div>
      <div class="horizontal-direction"><div class="horizontal-box">申请人员：<span>{{applicationFormNo1.tableHeader.applicant}}</span></div><div class="horizontal-box">申请时间：<span>{{applicationFormNo1.tableHeader.time}}</div><div class="horizontal-box">单位：<span>{{applicationFormNo1.tableHeader.unit}}</div></div>
      <div class="horizontal-direction"><div class="">销毁原因：<span>{{applicationFormNo1.tableHeader.reason}}</span></div></div>
      <div>
        <table cellspacing="0" cellpadding="0" border="1" class="el-table__header main-table" style="width: 100%;">
        <thead class="has-gutter">
          <tr class="text-center">
            <th><div>部位名称</div></th>
            <th><div>型号/底模/订 单</div></th>
            <th><div>线别/部门</div></th>
            <th><div>左脚销毁</div></th>
            <th><div>右脚销毁</div></th>
            <th><div>箱号</div></th>
            <th><div>备注</div></th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item, index) in applicationFormNo1.tableData" :key="index">
            <tr class="text-left"  v-for="(itemw, indexw) in item.data" :key="indexw" v-if="item.type === 'noTatal'">
              <td><div>{{item.name}}</div></td>
              <td><div>{{itemw.model}}</div></td>
              <td><div>{{itemw.lineType}}</div></td>
              <td><div class="text-center">{{itemw.left}}</div></td>
              <td><div class="text-center">{{itemw.right}}</div></td>
              <td><div class="text-center">{{itemw.caseNumber}}</div></td>
              <td><div>{{itemw.remarks}}</div></td>
            </tr>
            <tr class="total"   v-for="(itemw, indexw) in item.data" :key="indexw" v-if="item.type === 'itemTatal'">
              <td  colspan="3"><div class="text-center text-16px">合计</div></td>
              <td><div class="text-center text-16px">{{itemw.leftTotal}}</div></td>
              <td><div class="text-center text-16px">{{itemw.rightTotal}}</div></td>
              <td><div></div></td>
              <td><div></div></td>
            </tr>
            <tr class="total"  v-for="(itemww, indexww) in item.data" :key="indexww" v-if="item.type === 'tatal'">
              <td  colspan="3"><div class="text-center text-16px">总计</div></td>
              <td><div class="text-center text-16px">{{itemww.leftTotal}}</div></td>
              <td><div class="text-center text-16px">{{itemww.rightTotal}}</div></td>
              <td><div></div></td>
              <td><div></div></td>
            </tr>
          </template>
        </tbody>
      </table>
      </div>
      <div>
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 70%;">
        <thead class="has-gutter">
          <tr class="text-left">
            <th><div class="examine-cell">审核人员</div></th>
            <th><div class="examine-cell">审核状况</div></th>
            <th><div class="examine-cell">审核意见</div></th>
            <th><div class="examine-cell">审核时间</div></th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item, index) in applicationFormNo1.examineData" :key="index">
            <tr class="text-left">
              <td><div>{{item.name}}</div></td>
              <td><div>{{item.status}}</div></td>
              <td><div>{{item.opinion}}</div></td>
              <td><div>{{item.time}}</div></td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    <div class="horizontal-direction horizontal-sign"><div class="text-left">总经理签核:</div><div class="sign"></div></div>
  </div>

  <div id="no-2"  >
    <div class="w-title">{{applicationFormNo2.tableHeader.name}}销毁申请单</div>
    <div class="horizontal-direction"><div class="horizontal-box">申请单位：<span>{{applicationFormNo2.tableHeader.company}}</span></div><div class="horizontal-box">销毁单号：<span>{{applicationFormNo2.tableHeader.oddNumbers}}</div></div>
    <div class="horizontal-direction"><div class="horizontal-box">申请人员：<span>{{applicationFormNo2.tableHeader.applicant}}</span></div><div class="horizontal-box">申请日期：<span>{{applicationFormNo2.tableHeader.time}}</div></div>
    <div class="horizontal-direction"><div class="">销毁原因：<span>{{applicationFormNo2.tableHeader.reason}}</span></div></div>
    <div>
      <table cellspacing="0" cellpadding="0" border="1" class="el-table__header  main-table" style="width: 100%;">
      <thead class="has-gutter">
        <tr class="text-center">
          <th><div>物品编码</div></th>
          <th><div>物品名称</div></th>
          <th><div>单位</div></th>
          <th><div>鞋款</div></th>
          <th><div>订单</div></th>
          <th><div>销毁数量</div></th>
          <th><div>销毁单位</div></th>
          <th><div>备注</div></th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(item, index) in applicationFormNo2.tableData" :key="index">
          <tr class="text-left">
            <td><div>{{item.code}}</div></td>
            <td><div>{{item.name}}</div></td>
            <td><div>{{item.unit}}</div></td>
            <td><div>{{item.shoes}}</div></td>
            <td><div>{{item.order}}</div></td>
            <td><div class="text-center">{{item.destructionNumber}}</div></td>
            <td><div>{{item.destructionUnit}}</div></td>
            <td><div>{{item.remarks}}</div></td>
          </tr>
        </template>
      </tbody>
    </table>
    </div>
    <div>
      <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 70%;">
      <thead class="has-gutter">
        <tr class="text-left">
          <th><div class="examine-cell">签核角色</div></th>
          <th><div class="examine-cell">签核人员</div></th>
          <th><div class="examine-cell">签核状况</div></th>
          <th><div class="examine-cell">签核时间</div></th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(item, index) in applicationFormNo2.examineData" :key="index">
          <tr class="text-left">
            <td><div>{{item.role}}</div></td>
            <td><div>{{item.name}}</div></td>
            <td><div>{{item.status}}</div></td>
            <td><div>{{item.time}}</div></td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
  <div class="horizontal-direction horizontal-sign"><div class="text-left">总经理签核:</div><div class="sign"></div></div>
</div>

<div id="no-3"  >
  <div class="w-title">{{applicationFormNo3.tableHeader.name}}销毁申请单</div>
  <div class="horizontal-direction"><div class="horizontal-box">申请单位：<span>{{applicationFormNo3.tableHeader.company}}</span></div><div class="horizontal-box">销毁单号：<span>{{applicationFormNo3.tableHeader.oddNumbers}}</div></div>
  <div class="horizontal-direction"><div class="horizontal-box">申请人员：<span>{{applicationFormNo3.tableHeader.applicant}}</span></div><div class="horizontal-box">申请日期：<span>{{applicationFormNo3.tableHeader.time}}</div><div class="horizontal-box">单位：<span>{{applicationFormNo3.tableHeader.unit}}</div></div>
  <div class="horizontal-direction"><div class="">销毁原因：<span>{{applicationFormNo3.tableHeader.reason}}</span></div></div>
  <div>
    <table cellspacing="0" cellpadding="0" border="1" class="el-table__header main-table" style="width: 100%;">
    <thead class="has-gutter">
      <tr class="text-center">
        <th><div>品牌</div></th>
        <th><div>线别</div></th>
        <th><div>线别主管</div></th>
        <th><div>类别/部位名称</div></th>
        <th><div>客户订单</div></th>
        <th><div>工厂订单</div></th>
        <th><div>ARTICNO</div></th>
        <th><div>型体</div></th>
        <th><div>数量（只）</div></th>
        <th><div>箱号</div></th>
        <th><div>原因</div></th>
      </tr>
    </thead>
    <tbody>
      <template v-for="(item, index) in applicationFormNo3.tableData" :key="index">
        <tr class="text-left"  v-for="(itemw, indexw) in item.data" :key="indexw" v-if="item.type === 'noTatal'">
          <td><div>{{item.brand}}</div></td>
          <td><div>{{itemw.lineName}}</div></td>
          <td><div>{{itemw.director}}</div></td>
          <td><div>{{itemw.name}}</div></td>
          <td><div>{{itemw.customerOrder}}</div></td>
          <td><div>{{itemw.factoryrOrder}}</div></td>
          <td><div>{{itemw.articno}}</div></td>
          <td><div>{{itemw.bodyType}}</div></td>
          <td><div class="text-center">{{itemw.number}}</div></td>
          <td><div class="text-center">{{itemw.caseNumber}}</div></td>
          <td><div>{{itemw.reason}}</div></td>
        </tr>
        <tr class="total"   v-for="(itemw, indexw) in item.data" :key="indexw" v-if="item.type === 'itemTatal'">
          <td  colspan="8"><div class="text-center text-16px">合计</div></td>
          <td><div class="text-center text-16px">{{itemw.total}}</div></td>
          <td><div></div></td>
          <td><div></div></td>
        </tr>
        <tr class="total"  v-for="(itemww, indexww) in item.data" :key="indexww" v-if="item.type === 'tatal'">
          <td  colspan="8"><div class="text-center text-16px">总计</div></td>
          <td><div class="text-center text-16px">{{itemww.total}}</div></td>
          <td><div></div></td>
          <td><div></div></td>
        </tr>
      </template>
    </tbody>
  </table>
  </div>
  <div>
    <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 70%;">
      <thead class="has-gutter">
        <tr class="text-left">
          <th><div class="examine-cell">签核角色</div></th>
          <th><div class="examine-cell">签核人员</div></th>
          <th><div class="examine-cell">签核状况</div></th>
          <th><div class="examine-cell">签核时间</div></th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(item, index) in applicationFormNo3.examineData" :key="index">
          <tr class="text-left">
            <td><div>{{item.role}}</div></td>
            <td><div>{{item.name}}</div></td>
            <td><div>{{item.status}}</div></td>
            <td><div>{{item.time}}</div></td>
          </tr>
        </template>
      </tbody>
    </table>
</div>
<div class="horizontal-direction horizontal-sign"><div class="text-left">总经理签核:</div><div class="sign"></div></div>
</div>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          // sessionStorageData:JSON.parse(sessionStorage.parameterData),//获取请求参数
          no:1,//1,2,3代表这种不同的表格
          applicationFormNo1: {
            tableHeader: {
              name: '湖南一厂B栋成型品',//销 毁 单 名
              company: 'B栋成',//申 请 单 位
              oddNumbers:'C30210421001',//销 毁 单 号
              applicant:'卞 友 芳',//申 请 人 员
              time:'2021/04/21',//申 请 时 间
              unit:'只',//单 位
              reason:'型体下线,为释放现场空间,申请报废处',//销 毁 原 因
            },
            tableData: [
              {type:'noTatal',name: '鞋面',data:[
                { model: 'AGCP293-1', lineType: 'B栋成六', left: 21, right: 31,caseNumber: '11',remarks: '无利用价值'},
                { model: 'AGCP293-2', lineType: 'B栋成六', left: 22, right: 31,caseNumber: '12',remarks: '无利用价值'},
                { model: 'AGCP293-3', lineType: 'B栋成六', left: 23, right: 33,caseNumber: '13',remarks: '无利用价值'}
              ]},
              {type:'itemTatal',name: '合计',data:[{leftTotal: 66, rightTotal: 9}]},
              {type:'noTatal',name: '成品鞋',data:[
                { model: 'ARMR008-1', lineType: 'B栋成六', left: 21, right: 31,caseNumber: '11',remarks: '无利用价值'},
                { model: 'ARMR008-2', lineType: 'B栋成六', left: 22, right: 31,caseNumber: '12',remarks: '无利用价值'},
                { model: 'ARMR008-3', lineType: 'B栋成六', left: 23, right: 33,caseNumber: '13',remarks: '无利用价值'}
              ]},
              {type:'itemTatal',name: '合计',data:[{leftTotal: 66, rightTotal: 95}]},
              {type:'tatal',name: '总计',data:[{leftTotal: 132, rightTotal: 190}]},
            ],
            examineData:[
            { name: 'www', status: '审核通过', opinion: 'well', time: '2021/04/24 13:06:37'},
            { name: 'www2', status: '审核通过', opinion: 'well', time: '2021/04/24 13:06:37'},
            { name: 'www3', status: '审核通过', opinion: 'well', time: '2021/04/24 13:06:37'},
            ]
          },
          applicationFormNo2: {
            tableHeader: {
              name: '湖南一厂B栋成型品',//销 毁 单 名
              company: 'B栋成',//申 请 单 位
              oddNumbers:'C30210421001',//销 毁 单 号
              applicant:'卞 友 芳',//申 请 人 员
              time:'2021/04/21',//申 请 时 间
              reason:'型体下线,为释放现场空间,申请报废处',//销 毁 原 因
            },
            tableData: [
                { code: 'AA0046', name: '鞋身外腰', unit:'片',shoes: 'EG4958', order: 'NO11',destructionNumber: 12,destructionUnit: '片',remarks: '不良品数量单,位以双计算'},
                { code: 'AA00462', name: '鞋身外腰2', unit:'片',shoes: 'EG4958', order: 'NO12',destructionNumber: 12,destructionUnit: '片',remarks: '不良品数量单,位以双计算'},
                { code: 'AA00463', name: '鞋身外腰3', unit:'片',shoes: 'EG4958', order: 'NO13',destructionNumber: 12,destructionUnit: '片',remarks: '不良品数量单,位以双计算'},
              ],
            examineData:[
            { name: 'www', status: '审核通过', role: '品质主管', time: '2021/04/24'},
            { name: 'www2', status: '审核通过', role: '工厂企划', time: '2021/04/24'},
            { name: 'www3', status: '审核通过', role: '厂务协理', time: '2021/04/24'},
            ]
          },
          applicationFormNo3: {
            tableHeader: {
              name: '湖南一厂B栋成型品',//销 毁 单 名
              company: 'B栋成',//申 请 单 位
              oddNumbers:'C30210421001',//销 毁 单 号
              applicant:'卞 友 芳',//申 请 人 员
              time:'2021/04/21',//申 请 时 间
              reason:'型体下线,为释放现场空间,申请报废处',//销 毁 原 因
            },
            tableData: [
              {type:'noTatal',name: '',data:[
                { brand:'Adidas',lineName:'成型',director:'朱正芹',name: '鞋面', customerOrder: '0127040886',factoryrOrder: 'AD2011-0018', articno: 'EG4958', bodyType: 'SUPERSTAR',number: 19,caseNumber:'12',reason: '成型操作报废',total:0},
                { brand:'Adidas',lineName:'成型',director:'朱正芹',name: '鞋面2', customerOrder: '0127040886',factoryrOrder: 'AD2011-0018', articno: 'EG4958', bodyType: 'SUPERSTAR',number: 19,caseNumber:'12',reason: '成型操作报废',total:0},
                { brand:'Adidas',lineName:'成型',director:'朱正芹',name: '鞋面3', customerOrder: '0127040886',factoryrOrder: 'AD2011-0018', articno: 'EG4958', bodyType: 'SUPERSTAR',number: 19,caseNumber:'12',reason: '成型操作报废',total:0}
              ]},
              {type:'itemTatal',name: '合计',data:[{total: 66}]},
              {type:'noTatal',name: '',data:[
              { brand:'Adidas',lineName:'成型',director:'朱正芹',name: '鞋面4', customerOrder: '0127040886',factoryrOrder: 'AD2011-0018', ARTICNO: 'EG4958', bodyType: 'SUPERSTAR',number: 19,caseNumber:'12',reason: '成型操作报废',total:0}
              ]},
              {type:'itemTatal',name: '合计',data:[{total: 99}]},
              {type:'tatal',name: '总计',data:[{total: 190}]},
            ],
            examineData:[
            { name: 'www', status: '审核通过', role: '品质主管', time: '2021/04/24'},
            { name: 'www2', status: '审核通过', role: '工厂企划', time: '2021/04/24'},
            { name: 'www3', status: '审核通过', role: '厂务协理', time: '2021/04/24'},
            ]
          }
        }
      },
      created() {
        // axios.get('http://www.84.com:84/index.php?s=/api/category/list', {
        //   params: {
        //   }
        // })
        // .then(function (response) {
        //   console.log(response);
        // })
        // .catch(function (error) {
        //   console.log(error);
        // });
        axios.post('http://192.168.154.16:8080/approvals/report', {
         
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      methods: {
      }
    })
  </script>
  
  <style>
    .w-app{
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      font-size: 14px;
      }
      .w-app>div>div{margin-bottom: 15px;}
      .w-app div.w-title{
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 25px;
      }
      .horizontal-direction{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
      }
      .horizontal-box{width:33.3%;
         text-align: left;
      }
      .text-center{text-align: center;}
      .text-left{text-align: left;}
      th,td{padding: 4px 4px;}
      .main-table,.main-table th,.main-table td{border-collapse:collapse;border: 1px solid #000;}
      .total>td{padding: 6px 4px;}
      .horizontal-sign{margin-top:30px;}
      .examine-cell{border-bottom: 1px solid #000;width:80%;}
      .sign{border-bottom: 1px solid #000;width:200px;}
      .text-16px{font-size: 16px;}
  </style>
</html>
